<template>
    <div class="fill_empty">
        <!-- 标题 如果选择题模块数据的长度为零,那么久不显示选择题模块的大标题 -->
        <span class="qusetion_big_title">
            {{ order +'.&nbsp;&nbsp;'}}程序阅读题:在每小题的横线处填上合适的java片段，使其可以成功运行和解释其注释语句.
        </span>
        <!-- 主体部分 -->
        <div v-for="(item,index) in FillemptyQuestions" :key="index">
            <span class="qusetion_small_title">({{ index+ 1}}) [{{item.score}} 分] {{ item.questionDescription }} ()</span>
            <pre><code>{{item.code}}</code></pre>

            <!-- 学生作答区域 -->
            <div v-for="(item1, index1) in item.answer" :key="index1" class="answering_area">
                <span>第{{ index1 + 1 }}问</span>
                <el-input class="elinput" placeholder="请输入你的答案"
                    v-model="item1.option"></el-input>
            </div>
        </div>
    </div>
</template>



<script>
    export default {
        // 父组件传过来的id值  表示这套试卷的id，
        props: ['id'],
        data() {
            return {
                // 大题顺序，一般为3但是有时候没有判断题时，就显示为二
                order: "三",
                FillemptyQuestions: [
                    {
                        id: 1,
                        questionNumber: "F-113",
                        questionDescription: "请补充以下代码，使其可以完整运行",
                        code: "public class main{\n    public static void main(String[] args) {\n        int a1 =10;\n        _________;\n        System.out.println(a1+a2);//最终打印的值是30\n    }\n}",
                        answer: [
                            { option: "" },//这个answer用于存储用户答案数据
                        ],
                        score: 10,
                    },
                    {
                        id: 1,
                        questionNumber: "F-113",
                        questionDescription: "请补充以下代码，使其可以完整运行",
                        code: "public class main{\n    public static void main(String[] args) {\n        int a1 =10;\n        _________;\n        System.out.println(a1+a2);//最终打印的值是30\n    }\n}",
                        answer: [
                            { option: "" },//这个answer用于存储用户答案数据
                            { option: "" },//这个answer用于存储用户答案数据
                        ],
                        score: 10,
                    },
                ],
            };
        },
        created() {
            console.log("程序阅读题接收的试卷id" + this.id);
            // 利用query的id向后端发送请求，请求题型数据，因为题型分布等关系，分四次请求，分别请求不同题型
        }
    }
</script>



<style lang="less" scoped>
    .fill_empty{
        margin-top: 20px;
    }
    /* 大标题样式 */
    .qusetion_big_title {
        font-size: 20px;
    }

    /* 小标题样式 */
    .qusetion_small_title {
        font-size: 18px;
        margin-top: 10px;
    }

    /* 代码块展示部分 */
    pre {
        background-color: #f2f2f2;
        font-size: 20px;
    }

    /* 作答区域 */
    .answering_area {
        display: flex;
        font-size: 20px;

        span {
            width: 100px;
            margin: 10px 0;
        }

        .elinput {
            font-size: 20px;
        }
    }
</style>